<template>
<div class="my">
  <headers :heatle="title"></headers>
  <div class="mydata">
    <div>
      <img src="../img/carousel2.jpg" alt="">
      <p>name</p>
    </div>
    <div>
      <div>
        <p>0本</p>
        <span>听完</span>
      </div>
      <div>
        <p><b>0</b>分钟</p>
        <span>学习时长</span>
      </div>
    </div>
  </div>
  <div class="my-list">
      <ul>
        <li v-for="item in list" @click="liClick(item)">
          <img :src="item.icon" alt="">
          <p>{{item.name}}</p>
        </li>
      </ul>
  </div>
  <footers></footers>
</div>
</template>

<script>
  import footers from '@/components/footers'
  import headers from '@/components/headers'
  import carouselImg from '../img/carousel1.jpg';

  export default {
        name: "my",
      components:{
        footers,
        headers
      },
      data(){
          return{
            title:'我的',
            list:[{icon:'../img/carousel1.jpg',name:'会员vip',id:1},{icon:'carouselImg',name:'优惠券',id:2},{icon:'carouselImg',name:'兑换码',id:3},{icon:'carouselImg',name:'有问题，联系客服',id:4},{icon:'carouselImg',name:'设置',id:5}]
          }
      },
    methods:{
          liClick(v){
            if(v.id==1){
              this.$router.push({name:'vip'})
            }
            if(v.id==2){
              this.$router.push({name:'vip'})
            }
            if(v.id==3){
              this.$router.push({name:'vip'})
            }
            if(v.id==4){
              this.$router.push({name:'vip'})
            }
            if(v.id==5){
              this.$router.push({name:'setstings'})
            }
          },
    }
    }
</script>

<style scoped>
  .my{
    background: #eee;
    height:100%;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
  }
  .mydata{
    width: 100%;
    background: #f0f;
    height: 1.6rem;
    margin-bottom: .1rem;
  }
  .mydata >div:nth-child(1) p{
    float: left;
    margin-left: .15rem;
    line-height: .55rem;
    font-weight: bold;

  }
  .mydata >div:nth-child(1) img{
    height: .55rem;
    width: .55rem;
    border-radius: 50%;
    float: left;
    margin-left: .2rem;

  }
  .mydata >div:nth-child(1){
    height: .8rem;
    padding-top: .2rem;
  }
  .mydata >div:nth-child(2) div{
    width: 50%;
    float: left;
    margin-top: .2rem;
  }
  .my-list{
    /*background: #eee;*/
    flex:1;
    -webkit-flex:1;
  }
  .my-list li img{
    float: left;
  }
  .my-list li p{
    float: left;
    margin-left: .1rem;
    line-height: .5rem;
  }

  .my-list li{
    height: .5rem;
    margin-bottom: 1px;
    background: #fff;
  }
</style>
